<template>
	<view class="my-focus-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="my-focus">
				<view class="fans" v-for="(item,i) in dataList" :key="i">
					<view class="head" @click="toPage(item.userId)">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="text-css">
						<view class="text">
							<text>{{item.username}}</text>
						</view>
						<view class="follow" v-if="item.isMutual" @click="focus(item)">
							<text>+ 关注</text>
						</view>
						<view class="unfollow" v-else @click="showPopup(item)">
							<text>已关注</text>
						</view>
					</view>
				</view>
			</view>
			<Popup :title="popupName" cancel="取消" ensure="确定" ref="popupRef" @reserved="reserved"></Popup>
		</z-paging>
	</view>

</template>

<script>
	import {
		userFollowing,
		userChangeRelation
	} from '@/api/user.js';
	import Popup from './common/popup.vue'
	export default {
		components: {
			Popup
		},
		data() {
			return {
				popupName: '', //弹框提示信息
				popupItem: {}, //接收当前关注人信息
				dataList: [],
				pageNum: 0,
				pageSize: 0,
				list: [{
						name: '飞翔的菠萝',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
				]
			}
		},
		methods: {
			showPopup(item) {
				this.$refs.popupRef.open()
				this.popupName = '确定不再关注' + item.username + '吗？'
				this.popupItem = item
			},
			focus(item) {
				this.changeRelation(false)
				this.popupItem = item
			},
			//关注或不关注方法
			async changeRelation(foll) {
				try {
					const res = await userChangeRelation({
						beFollowId: this.popupItem.userId,
						following: foll,
					})
					this.$refs.popupRef.close()
					this.popupItem.isMutual = !foll //修改成功之后设置状态
					this.queryList(this.pageNum, this.pageSize)
				} catch (e) {
					//TODO handle the exception
				}
			},
			reserved() {
				this.changeRelation(false)
			},
			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				try {
					const res = await userFollowing({
						pageNum: pageNo,
						pageSize: pageSize + 5,
					})
					this.pageNum = pageNo;
					this.pageSize = pageSize;
					this.$refs.paging.complete(res.data);
				} catch (e) {
					// 如果请求失败
					this.$refs.paging.complete(false) //展示错误页面
				}
			},
			toPage(id) {
				uni.navigateTo({
					url: `../community/userInfo?userId=${id}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.my-focus {
		padding: 60upx 40upx 0;

		.fans {
			display: flex;
			margin-bottom: 40upx;
			justify-content: space-between;

			.head {
				position: relative;

				&>image {
					width: 80upx;
					height: 80upx;
					background: #0098DF;
					border-radius: 50%;
				}
			}

			.text-css {
				padding-left: 22upx;
				display: flex;
				width: calc(100% - 102upx);
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.text {
					height: 26upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					width: calc(100% - 145upx);
					align-items: center;
					display: flex;

					text:first-child {
						max-width: calc(100% - 160upx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						display: inline-block;
					}

					text:last-child {
						color: #4F4F4F;
						padding-left: 18upx;
					}
				}

				.follow {
					width: 145upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border: 2upx solid #333333;
					border-radius: 30upx;
				}

				.unfollow {
					width: 145rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 2rpx solid #F7F7F7;
					border-radius: 30rpx;
					background: #F7F7F7;
					color: #B2B4B5;
				}
			}
		}
	}
</style>
